{% extends "myadmin/base.html" %}


{% block main_body %}
<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    菜品管理
    <small>订餐系统后台管理</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li class="active">菜品信息管理</li>
  </ol>
</section>

<!-- Main content -->
<section class="content container-fluid">

  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h2 class="box-title"> <span class="glyphicon glyphicon-calendar" aria-hidden="true">编辑菜品信息</h2>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form class="form-horizontal" action="{% url 'myadmin_product_update' product.id %}" method="post" enctype="multipart/form-data">
          <input type="hidden" name="oldpicname" value="{{ product.cover_pic }}" />
          {% csrf_token %}
          <div class="box-body">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">店铺名称：</label>
              <div class="col-sm-4">
                <select name="shop_id" id="shop_id" onchange="doLoadCategory(0)" class="form-control select2" style="width: 100%;">
                  {% for svo in shoplist %}
                  <option value="{{ svo.id }}" {% if svo.id == product.shop_id %} selected {% endif %}>{{ svo.name }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">菜品分类：</label>
              <div class="col-sm-4">
                <select name="category_id" id="category_id" class="form-control select2" style="width: 100%;">
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">菜品名称：</label>
              <div class="col-sm-4">
                <input type="text" name="name" value="{{ product.name }}"  class="form-control" id="inputText3" />
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">单价：</label>
              <div class="col-sm-4">
                <input type="text" name="price" value="{{ product.price }}" class="form-control" id="inputText3" />
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">菜品图片：</label>
              <div class="col-sm-4">
                <input type="file" name="cover_pic" /><br/>
                <img src="/static/uploads/product/{{ product.cover_pic }}" width="200"/>
              </div>
            </div>

          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary">保存</button> &nbsp;
              <button type="reset" class="btn btn-default">重置</button>
              <div class="col-sm-offset-2 col-sm-10">
              </div>
              <!-- /.box-footer -->
        </form>
      </div>
      <!-- /.box -->
    </div>
  </div>

</section>
<!-- /.content -->
{% endblock %}


{% block loadjavascript %}
<script type="text/javascript">

  //自定义函数，实现通过店铺id，Ajax加载对应的菜品分类信息
  function doLoadCategory(cid){
    //获取选中的id号
    var id = $("#shop_id").val();
    $("#category_id").empty();
    $.ajax({
      url: "/myadmin/category/load/"+id,
      type: 'get',
      data: {},
      dataType:'json',
      success:function(res){
        if(res.data.length<1)
          return;
        var data = res.data;
        var select = $("#category_id")
        for(var i=0;i<data.length;i++){
          $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(select)
          //select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
        }
        select.find("option[value='"+cid+"']").attr("selected",true);

      }
    });

  }
  doLoadCategory({{product.category_id}});
</script>
{% endblock %}